{% extends 'base.html' %}

{% load static %}

{% block title %}
{{ school.name }}
{% endblock %}

{% block css %}
{{ block.super }}
<link rel="stylesheet" type="text/css" href="{% static 'css/school.css' %}">
{% endblock %}

{% block navsection %}
{{ block.super }}
{% verbatim vue %}
<ul class="tab tab-block" id="school-detail-tabs">
  <li class="tab-item" v-for="(index, tab) in tabs" v-bind:class="{active : current == index}">
    <a href="#" v-on:click="clickTabs(index)">{{ tab }}</a>
  </li>
</ul>
{% endverbatim vue %}
{% endblock %}

{% block content %}
<div class="container">
	<div class="columns">
		<div class="column col-6 col-md-10 col-lg-8 col-sm-12 col-lg-auto col-md-auto col-sm-auto col-mx-auto">
			<div id="school" v-show="show">
				<h5>{{ school.name }}</h5>
				<p>{{ school.desc }}</p>
				<figure class="figure">
					<img src="{{ school.shortcut.url }}" class="img-responsive">
				</figure>
				<p></p>
				<div class="divider"></div>
				<small class="float-right">以下为私密信息</small>
				<table class="table table-striped table-hover">
					<thead>
						<th>老师(总{{ school.teachers.all|length }}人){% if school.owner == user %}<a href="/teacher/add?school_id={{ school.pk }}" class="tooltip ml-2" data-tooltip="添加老师"><i class="icon icon-plus"></i></a>{% endif %}</th>
						<th>学生数(总{{ school.students.all|length }}人){% if school.owner == user %}<a href="/students/add?school_id={{ school.pk }}" class="tooltip ml-2" data-tooltip="添加学生"><i class="icon icon-plus"></i></a>{% endif %}</th>
					</thead>
					<tbody>
						{% for teacher in school.teachers.all %}
						<tr>
							<td>{{ teacher.me.last_name }}{{ teacher.me.first_name }}</td>
							<td>{{ teacher.students.all|length }}人</td>
						</tr>
						{% endfor %}
					</tbody>
				</table>
				<p></p>
				<cite>{{ school.location }}</cite>
				<p></p>
			</div>

			<div id="teachers" v-show="show">
				{% for teacher in school.teachers.all %}
				{% include "teacher-block.html" with teacher=teacher %}
				{% endfor %}
			</div>

			<div id="students" v-show="show">
				{% for student in school.students.all %}
				{% include "student-block.html" %}
				{% endfor %}
			</div>
		</div>
	</div>
</div>
{% endblock %}

{% block javascript %}
<script type="text/javascript" src="{% static 'js/js.cookie.js' %}"></script>
<script type="text/javascript" src="{% static 'js/school-detail.js' %}"></script>
{% endblock %}